/*
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-09-04 
 */


import { defineComponent, onMounted, ref, watch } from 'vue'
import './css/Menu.scss'
import NotDate from './NotDate'
export default defineComponent({
  name: 'SelectorMenu',
  components: { NotDate },
  props: {
    data: { type: Array, default: () => ([{ id: 1, value: 1, text: '选项1'}, { id: 2, value: 2, text: '选项2'}, { id: 3, value: 3, text: '选项3'}])},
    searchValue: { type: String, default: '' }
  },
  setup(props, { emit, slots }) {
    const searchData = ref([]);
    onMounted(() => {
      searchData.value = props.data
    });
    watch(() => props.searchValue, (value) => {
      fillterData(value)
    });
    function fillterData(value) {
      return searchData.value = props.data.filter(predicate => predicate.text.toLowerCase().includes(props.searchValue.toLowerCase().trim()));
    }
    function setItemValue(item) {
      emit('setItemValue', item);
    }
    function RenderMenuItem() {
      const node = searchData.value.map(item => <div class="menu-item" onClick={ setItemValue.bind(null, item) }>{item.text}</div>)
      return searchData.value.length > 0 ? node : <NotDate />
    };
    return () => {
      return (
        <div class='selector-menu'>
           {RenderMenuItem.bind(this)()}
        </div>
      )
    }
  }
})
